<template>
    <div>
        <Card>
            <el-form :model="queryForm">
                <el-row>
                    <el-col :span="6">
                        <el-form-item prop="managecom" label="">
                            <el-select v-model="queryForm.managecom" clearable  placeholder="管理机构" class="ibput">
                                <el-option v-for="(item,index) in organizationList" :label="item.manageCom" :value="item.companyCode" :key="index">
                                {{item.manageCom}}
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="salechnl" label="">
                            <el-select v-model="queryForm.salechnl" clearable  placeholder="渠道" >
                                <el-option label="个险" value="shanghai"></el-option>
                                <el-option label="银保" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item prop="renewalDepartmentName" label="">
                            <el-select v-model="queryForm.renewalDepartmentName" clearable  placeholder="续期服务人员所属部" >
                                <el-option label="80101000-王笑" value="80101000-王笑"></el-option>
                                    <el-option label="80102000-陈丽" value="80103000-陈丽"></el-option>
                                </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="renewalGroupName" label="">
                            <el-select v-model="queryForm.renewalGroupName" clearable  placeholder="续期服务人员所属组" >
                                <el-option label="860101X06-二号续收团队一组" value="860101X06-二号续收团队一组"></el-option>
                                    <el-option label="860101X04-二号续收团队二组" value="860101X04-二号续收团队二组"></el-option>
                                </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="renewalName" label="">
                            <el-select v-model="queryForm.renewalName" clearable  placeholder="续期服务人员" >
                                <el-option label="80101000-王笑" value="80101000-王笑"></el-option>
                                    <el-option label="80102000-陈丽" value="80103000-陈丽"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item prop="agentDepartmentName" label="">
                            <el-select v-model="queryForm.agentDepartmentName" clearable  placeholder="代理人所属部" >
                                <el-option label="8601001013-吴江业务三部" value="8601001013-吴江业务三部"></el-option>
                                    <el-option label="8601001014-吴江业务四部" value="8601001014-吴江业务四部"></el-option>
                                </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="agentGroupName" label="">
                            <el-select v-model="queryForm.agentGroupName" clearable  placeholder="代理人所属组" >
                                <el-option label="8601001013001-吴江业务三部三组" value="8601001013001-吴江业务三部三组"></el-option>
                                    <el-option label="8601001013003-吴江业务三部四组" value="8601001013003-吴江业务三部四组"></el-option>
                                </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="agentName" label="">
                            <el-select v-model="queryForm.agentName" clearable  placeholder="代理人" >
                            <el-option label="80101000-王笑" value="80101000-王笑"></el-option>
                                    <el-option label="80102000-陈丽" value="80103000-陈丽"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2.5">
                        <el-form-item label="">
                            <div class="text" @click="serviceLimit = !serviceLimit">
                                服务件数限制
                                <i class="el-icon-circle-plus-outline"></i>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="serviceLimit">
                    <el-col :span="6">
                        <el-form-item prop="maxServicePieces" label="">
                            <el-input v-model="queryForm.maxServicePieces" placeholder="最高服务件数" size="small"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="difficultServicePieces" label="">
                            <el-input v-model="queryForm.difficultServicePieces" placeholder="高难度件最高服务件数" size="small"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="largeServicePieces" label="">
                            <el-input v-model="queryForm.largeServicePieces" placeholder="大额单最高服务件数" size="small"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="">
                            <div style="display: inline-block;">
                                <el-button type="primary" size="mini" @click="submit">查询
                                </el-button>
                                <el-button type="primary" size="mini" @click="add">添加
                                </el-button>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </Card>
        <Card style="margin-top: 20px;">
            <el-table :data="tableList" >
                <el-table-column width="180" label="管理机构" prop="manageComName" align="center" />
                <el-table-column width="180" label="代理人所属部" prop="agentDepartmentName" align="center" />
                <el-table-column width="180" label="代理人所属组" prop="agentGroupName" align="center" />
                <el-table-column width="180" label="代理人" prop="agentName" align="center" />
                <el-table-column width="180" label="服务人员所属部" prop="renewalDepartmentName" align="center" />
                <el-table-column width="180" label="服务人员所属组" prop="renewalGroupName" align="center" />
                <el-table-column width="180" label="服务人员" prop="renewalName" align="center" />
                <el-table-column width="180" label="最高服务件数" prop="maxServicePieces" align="center" />
                <el-table-column width="180" label="高难度件最高服务件数" prop="difficultServicePieces" align="center" />
                <el-table-column width="180" label="大额单最高服务件数" prop="largeServicePieces" align="center" />
                <el-table-column width="110" label="操作" align="center" fixed="right">
                    <template slot-scope="{ row }">
                        <span @click="change(row)" class="change">修改</span>                    
                        <span @click="del(row)" class="del">删除</span>                    
                    </template>
                </el-table-column>
            </el-table>
            <pagination :total="tableList.length" :page.sync="queryForm.pageNum" :limit.sync="queryForm.pageSize" @pagination="getList" />
            <el-dialog
                :title="title"
                :visible.sync="dialogVisible"
                class="dialog"
                >
                <el-form :model="form" label-width="160px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item prop="manageComName" label="管理机构">
                                <el-select v-model="form.manageComName" clearable  placeholder="" class="ibput">
                                    <el-option label="8601-人寿无锡分公司" value="8601-人寿无锡分公司"></el-option>
                                    <el-option label="8601-人寿无锡分公司" value="8601-人寿无锡分公司"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="agentDepartmentName" label="代理人所属部">
                                <el-select v-model="form.agentDepartmentName" clearable  placeholder="" >
                                    <el-option label="8601001013-吴江业务三部" value="8601001013-吴江业务三部"></el-option>
                                    <el-option label="8601001014-吴江业务四部" value="8601001014-吴江业务四部"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                     <el-row>
                        <el-col :span="12">
                            <el-form-item prop="agentGroupName" label="代理人所属组">
                                <el-select v-model="form.agentGroupName" clearable  placeholder="" class="ibput">
                                    <el-option label="8601001013001-吴江业务三部三组" value="8601001013001-吴江业务三部三组"></el-option>
                                    <el-option label="8601001013003-吴江业务三部四组" value="8601001013003-吴江业务三部四组"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="agentName" label="代理人">
                                <el-select v-model="form.agentName" clearable  placeholder="" >
                                    <el-option label="80101000-王笑" value="80101000-王笑"></el-option>
                                    <el-option label="80102000-陈丽" value="80103000-陈丽"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                     <el-row>
                        <el-col :span="12">
                            <el-form-item prop="renewalDepartmentName" label="服务人员所属部">
                                <el-select v-model="form.renewalDepartmentName" clearable  placeholder="" class="ibput">
                                    <el-option label="860101X06-二号续收团队一部" value="860101X06-二号续收团队一部"></el-option>
                                    <el-option label="860101X04-二号续收团队二部" value="860101X04-二号续收团队二部"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="renewalGroupName" label="服务人员所属组">
                                <el-select v-model="form.renewalGroupName" clearable  placeholder="" >
                                    <el-option label="860101X06-二号续收团队一组" value="860101X06-二号续收团队一组"></el-option>
                                    <el-option label="860101X04-二号续收团队二组" value="860101X04-二号续收团队二组"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                     <el-row>
                        <el-col :span="12">
                            <el-form-item prop="renewalName" label="服务人员">
                                <el-select v-model="form.renewalName" clearable  placeholder="" class="ibput" style="width:100%;" >
                                    <el-option label="80101000-王笑" value="80101000-王笑"></el-option>
                                    <el-option label="80102000-陈丽" value="80103000-陈丽"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="maxServicePieces" label="最高服务件数">
                                <el-input v-model="form.maxServicePieces" placeholder="请输入" style="width:100%;"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item prop="difficultServicePieces" label="高难度件最高服务件数">
                                <el-input v-model="form.difficultServicePieces" placeholder="请输入" style="width:100%;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="largeServicePieces" label="大额单最高服务件数">
                                <el-input v-model="form.largeServicePieces" placeholder="请输入" style="width:100%;"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <!-- <el-form-item label=""> -->
                                <div class="saveBtn">
                                    <el-button  size="mini" @click="cancel">取消
                                    </el-button>
                                    <el-button type="primary" size="mini" @click="ok">保存
                                    </el-button>
                                </div>
                            <!-- </el-form-item> -->
                        </el-col>
                    </el-row>
                </el-form>
            </el-dialog>
        </Card>
    </div>
</template>

<script>
import { getCompanyList,getSupervisionQueryConfigist,getsupervisionSaveConfigist,getsupervisionUpdateConfigist,getsupervisionDeleteConfigist     } from '../../../api/renewalPlatformApi/index';

export default {
    name:'supervisoryRelationship',
    data(){
        return{
            dialogVisible:false,
            serviceLimit:false,
            text:'',
            queryForm:{
                managecom:'',
                largeServicePieces:'',
                difficultServicePieces:'',
                maxServicePieces:'',
                agentName:'',
                agentGroupName:''
            },
            form:{},
            tableList:[],
            organizationList:[],
            list:[{label:'test',value:'1'},{label:'test2',value:'2'}],
            title:'',


        }
    },
    created(){ 
        this.getList() 
    },
    methods: {
        getList() {
            getCompanyList({ companyType: '2' }).then((res) => {
                if (res.code === 200) {
                    res.data.forEach(item => {
                        let temp = {
                        companyCode: item.companyCode,
                        companyName: item.companyName,
                        placeCode: item.placeCode,
                        isShowSon: false,
                        checked: [],
                        cityList: [],
                        manageCom: item.companyCode + '-' + item.companyName,
                        }
                        this.organizationList.push(temp);
                        // console.log(this.organizationList,"organizationListorganizationList")
                    });
                }
            }).finally(() => {})
        },
        submit(){
            console.log("submitsubmit")
            this.getDatalist()
        },  
        add(){
            this.title = "添加数据"
            this.dialogVisible=true
            this.form = {}
            console.log("addaddadd")
        },
        change(row){
            this.title = "修改数据"
                this.dialogVisible=true
                this.form = row
        },
        del(row){
            getsupervisionDeleteConfigist(row).then( res =>{
                if(res.code == 200){
                    this.$message.success("删除成功")
                    this.getDatalist()
                }
            })
        },
        // 列表数据
        getDatalist(){
            let obj = {
                manageCode: this.queryForm.managecom
            }
            getSupervisionQueryConfigist(obj).then( res =>{
                if(res.code == 200){
                    this.tableList = res.data.list
                }else{
                    this.tableList = []
                }
            })
        },  
        cancel(){
            this.dialogVisible = false
            this.form = {}
        },
        ok(){
            this.dialogVisible=false
            if(this.title == "修改数据"){
                getsupervisionUpdateConfigist(this.form).then( res =>{
                    if(res.code == 200){
                        this.$message.success("修改成功")
                    }else{
                        this.$message.error("修改失败")
                    }
                })
            }else{
                getsupervisionSaveConfigist(this.form).then( res =>{
                    if(res.code == 200){
                        console.log("addaddad")   
                        this.submit()
                    }
                })
            }
        }
    }

}
</script>

<style scoped>
.text{
    color: blue;
    cursor: pointer;
}
.change{
    color:blue;margin-right:15px;
    cursor: pointer;
}
.del{
    color:red;
    cursor: pointer;
}
.el-select{
    width: 100%;
}
.dialog{
    width: "100%"
}
.saveBtn{
    /* display: inline-block; */
    float:right;
    margin-top:10px;
}
</style>